<template>
	<div class="blog-list-container" ref="blogRef" v-loading="isDataLoading">
		<div class="item" v-for="item in data.rows" :key="item.id">
			<div class="left">
				<div class="img-container" v-if="item.thumb">
					<router-link :to="{ name: 'detail', params: { id: item.id } }">
						<img v-lazy="item.thumb" alt="暂未信息" />
					</router-link>
				</div>
				<div class="img-container-hide" v-if="!item.thumb"></div>
			</div>
			<div class="right">
				<div class="title">
					<router-link :to="{ name: 'detail', params: { id: item.id } }">
						<span>{{ item.title }}</span>
					</router-link>
				</div>
				<div class="info">
					<div class="date">日期 : {{ timestampToLocal(item.createDate) }}</div>
					<div class="scan">浏览 : {{ item.scanNumber }}</div>
					<div class="comment">评论 : {{ item.commentNumber }}</div>
					<router-link
						:to="{
							name: 'categoryBlog',
							params: {
								categoryId: item.category.id,
							},
						}"
					>
						{{ item.category.name }}
					</router-link>
				</div>
				<div class="content">
					{{ item.description }}
				</div>
			</div>
		</div>
		<empty v-if="data.rows.length === 0 && !isDataLoading"></empty>
		<!-- 分页组件 -->
		<pager
			:current="routeInfo.page"
			:total="data.total"
			:limit="routeInfo.limit"
			:visibleNumber="10"
			@pageChange="handlePageChange"
		></pager>
	</div>
</template>

<script>
import fetchData from '@/mixins/fetchData'
import Pager from '@/components/Pager.vue'
import * as blogApi from '@/api/blog'
import { timestampToLocal } from '@/utils/time'
import mainScroll from '@/mixins/mianScroll'
import Empty from '@/components/Empty.vue'
export default {
	name: 'BlogList',
	components: { Pager, Empty },
	mixins: [fetchData({ total: 0, rows: [] }), mainScroll('blogRef')], // 带有this.data数组，博客文章
	data() {
		return {
			isBackTopVisible: false,
		}
	},
	methods: {
		async fetchData() {
			const res = await blogApi.getBlogs(this.routeInfo.page, this.routeInfo.limit, this.routeInfo.categoryId)
			return res
		},
		timestampToLocal,
		handlePageChange(newPage) {
			// 2种情况，/blog/cate/1以及/blog
			if (this.routeInfo.categoryId === -1) {
				this.$router.push({
					name: 'blog',
					query: {
						page: newPage,
						limit: this.routeInfo.limit,
					},
				})
			} else {
				this.$router.push({
					name: 'categoryBlog',
					query: {
						page: newPage,
						limit: this.routeInfo.limit,
					},
					params: {
						categoryId: this.routeInfo.categoryId,
					},
				})
			}
		},
	},
	computed: {
		// 获取路由信息中转
		routeInfo() {
			const categoryId = this.$route.params.categoryId || -1
			const page = +this.$route.query.page || 1
			const limit = +this.$route.query.limit || 10
			return { categoryId, page, limit }
		},
	},
	watch: {
		async $route(newValue) {
			// 这里重新请求数据
			this.isDataLoading = true
			this.data = await this.fetchData()
			this.isDataLoading = false
		},
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/basic/var.less';
.blog-list-container {
	@maxWidth: 650px;
	width: 100%;
	height: 100%;
	overflow: auto;
	scroll-behavior: smooth;
	& .item {
		display: flex;
		gap: 10px;
		border-bottom: 1px solid #999;
		margin: 15px 10px;
		.img-container {
			padding: 10px;
			width: 200px;
			height: 150px;
			margin-bottom: 10px;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 10px;
				transition: all 0.3s;
			}
			img:hover {
				box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
			}
		}
		.img-container-hide {
			padding: 10px;
			width: 0px;
			height: 150px;
			margin-bottom: 10px;
		}
		.right {
			display: flex;
			gap: 5px;
			flex-direction: column;
			flex: auto;
			padding: 0 10px 0 0;
			.title {
				font-size: 1.5rem;
				font-weight: bold;
				margin-top: 15px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				& span {
					cursor: pointer;
					transition: all 0.3s;
				}
				span:hover {
					text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
					color: @warn;
				}
			}
			.info {
				display: flex;
				gap: 10px;
				align-items: center;
				font-size: 0.6em;
				color: @gray;
			}
			.content {
				color: #555;
				font-size: 0.9em;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 3;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
	}
}
</style>
